<template>
  <div>
    <van-nav-bar title="搜索" @click-left="onClickLeft" safe-area-inset-top fixed>
      <template #left>
        <van-search
            v-model="searchInfo"
            placeholder="请输入电影信息"
            shape="round"
            background="#eff"
            clearable
            @search="doSearch"
            @clear="searchInfo = ''"/>
      </template>
      <template #right>
        <van-icon name="home-o" size="20" style="margin-right: 10px" @click="backToHome"/>
        <van-icon name="info-o" :badge="badge" @click="showInfo" size="20"/>
      </template>
    </van-nav-bar>
    <van-dialog
        v-model:show="show"
        title="欢迎使用本系统!"
        message="遇到问题请联系管理员!"
        theme="round-button"
        :allowHtml="true">
      <el-image src="https://img2.baidu.com/it/u=504478121,2915489766&fm=26&fmt=auto"></el-image>
      <p style="margin-top: 10px !important; text-align: center">遇到问题请联系管理员!</p>
    </van-dialog>
  </div>
</template>

<script>
import searchMovieAPI from '@/api/searchMovieAPI.js'
import searchComment from '../../api/searchCommentAPI.js'
import bus from '@/utils/EventBus.js'

export default {
  data() {
    return {
      badge: '1',
      show: false,
      searchInfo: ''
    }
  },
  methods: {
    showInfo() {
      this.badge = ''
      this.show = true
    },
    onClickLeft() {
      this.$router.back(-1)
      searchComment('很差').then(res => {
        console.log(res.data.data.length);
      });
    },
    doSearch() {
      searchMovieAPI(this.searchInfo).then(res => {
        bus.$emit('search', res.data.data)
      })
    },
    backToHome() {
      bus.$emit('back')
    }
  }
}
</script>

<style lang="less" scoped>
.image {
  width: 100%;
  display: block;
}
</style>
